import {designPage} from "plain-design-composition";
import './DemoTableClassAndStyle.scss';
import data from '../../../data/data-1.json';
import {DemoRow} from "../../Demo/DemoRow";
import {Plc, Table} from "../../../../packages";
import {DemoLine} from "../../Demo/DemoLine";

export default designPage(() => {

  const utils = {
    rowClassFunc({ data }: any) {
      const { star } = data;
      return [
        'custom-row',
        `custom-row-status-${star > 5 ? 'active' : 'inactive'}`
      ];
    },
    cellClassFunc({ data }: any, plc: any) {
      const { star } = data;

      if (plc.props.field === 'star') {
        return [
          'custom-cell',
          `custom-cell-status-${star > 5 ? 'active' : 'inactive'}`
        ];
      }
    },
    cellStyleFunc({ data: { star } }: any, { props: { field } }: any) {
      if (field === 'star') {
        return {
          color: star > 5 ? '#12b4a5' : '',
          fontWeight: star > 5 ? 'bold' : 'normal'
        };
      }
      return {};
    },
    headCellClassFunc({ props: { field } }: any) {
      if (field === 'star') {
        return 'custom-head-cell-clz';
      }
    },
    headCellStyleFunc({ props: { field } }: any) {
      if (field === 'star') {
        return {
          backgroundColor: '#3E97EC',
          color: 'white',
        };
      }
      return {};
    },
  };

  return () => (
    <div>
      <DemoRow title={'rowClassFunc'}>
        <DemoLine title={'评分大于5的显示背景蓝色'}/>
        <Table data={data} rowClassFunc={utils.rowClassFunc} showRows={10}>
          <Plc field="id" title="编号"/>
          <Plc field="size" title="大小"/>
          <Plc field="date" title="日期"/>
          <Plc field="color" title="颜色"/>
          <Plc field="name" title="名称"/>
          <Plc field="star" title="评分"/>
        </Table>
      </DemoRow>
      <DemoRow title={'cellClassFunc'}>
        <DemoLine title={'评分大于5的显示背景蓝色'}/>
        <Table data={data} cellClassFunc={utils.cellClassFunc} showRows={10}>
          <Plc field="id" title="编号"/>
          <Plc field="size" title="大小"/>
          <Plc field="date" title="日期"/>
          <Plc field="color" title="颜色"/>
          <Plc field="name" title="名称"/>
          <Plc field="star" title="评分"/>
        </Table>
      </DemoRow>
      <DemoRow title={'cellStyleFunc'}>
        <DemoLine title={'评分大于5的蓝色加粗字体'}/>
        <Table data={data} cellStyleFunc={utils.cellStyleFunc} showRows={10}>
          <Plc field="id" title="编号"/>
          <Plc field="size" title="大小"/>
          <Plc field="date" title="日期"/>
          <Plc field="color" title="颜色"/>
          <Plc field="name" title="名称"/>
          <Plc field="star" title="评分"/>
        </Table>
      </DemoRow>
      <DemoRow title={'headCellClassFunc'}>
        <DemoLine title={'评分大于5的蓝色加粗字体'}/>
        <Table data={data} headCellClassFunc={utils.headCellClassFunc} showRows={10}>
          <Plc field="id" title="编号"/>
          <Plc field="size" title="大小"/>
          <Plc field="date" title="日期"/>
          <Plc field="color" title="颜色"/>
          <Plc field="name" title="名称"/>
          <Plc field="star" title="评分"/>
        </Table>
      </DemoRow>
      <DemoRow title={'headCellStyleFunc'}>
        <DemoLine title={'评分大于5的蓝色加粗字体'}/>
        <Table data={data} headCellStyleFunc={utils.headCellStyleFunc} showRows={10}>
          <Plc field="id" title="编号"/>
          <Plc field="size" title="大小"/>
          <Plc field="date" title="日期"/>
          <Plc field="color" title="颜色"/>
          <Plc field="name" title="名称"/>
          <Plc field="star" title="评分"/>
        </Table>
      </DemoRow>
    </div>
  );
});
